<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教师管理</title>
    <link href="css/TeacherCourse.css" rel="stylesheet">
</head>
<body>
<div id="TeacherCourse">
    <el-container>
        <el-aside>
            <el-menu
                    default-active="1"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                <div class="block" align="center">
                    <el-avatar :size="100" :src="circleUrl"></el-avatar>
                    <br>
                    <el>欢迎！{{teacherInfo.name}}教师</el>
                </div>
                <el-menu-item index="1" @click="showTeacherInfo">
                    <svg t="1654349772655" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="1792" width="200" height="200">
                        <path d="M681.472 548.864A252.928 252.928 0 0 0 768 358.4 256 256 0 0 0 256 358.4a252.928 252.928 0 0 0 86.528 190.464A409.6 409.6 0 0 0 102.4 921.6h819.2a409.6 409.6 0 0 0-240.128-372.736zM512 204.8a153.6 153.6 0 1 1-153.6 153.6 153.6 153.6 0 0 1 153.6-153.6zM223.744 819.2a307.2 307.2 0 0 1 576.512 0z"
                              fill="" p-id="1793"></path>
                    </svg>
                    <span slot="title">个人信息</span>
                </el-menu-item>
                <el-menu-item index="2" @click="showTeacherCourseinfo">
                    <svg t="1654349992936" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="5957" width="200" height="200">
                        <path d="M270.277 250.937h-0.004c0-21.347 17.328-38.653 38.68-38.653h406.096c21.347 0 38.675 17.305 38.675 38.653L782.732 444.3h37.304l-27.637-193.34c0-42.74-34.635-77.375-77.352-77.375H308.951c-42.722 0-77.355 34.635-77.355 77.375L203.98 444.3h37.285l29.01-193.363z"
                              p-id="5958"></path>
                        <path d="M308.947 371.393c0 16.032 12.994 29.01 29.008 29.01H686.04c16.014 0 29.01-12.978 29.01-29.01 0-16.01-12.995-9.667-29.01-9.667H337.955c-16.014 0-29.008-6.346-29.008 9.667zM666.701 303.71c16.014 0 29.01-12.996 29.01-29.005 0-16.013-12.995-9.672-29.01-9.672H357.293c-16.013 0-29.01-6.342-29.01 9.672 0 16.01 12.996 29.004 29.01 29.004h309.408zM811.74 482.993H212.259c-42.717 0-77.351 34.634-77.351 77.374l19.337 212.697c0 42.738 34.635 77.35 77.352 77.35h560.803c42.721 0 77.355-34.612 77.355-77.35l19.338-212.697c0-42.739-34.634-77.374-77.351-77.374zM618.36 705.362c0 16.014-12.996 29.009-28.987 29.009H434.627c-15.992 0-28.986-12.994-28.986-29.01 0-16.009 12.994-29.004 29.007-29.004H589.35c16.013 0 29.01 12.995 29.01 29.005z"
                              p-id="5959"></path>
                    </svg>
                    <span slot="title">教学信息</span>
                </el-menu-item>
                <el-submenu index="3">
                    <template slot="title">
                        <svg t="1654350048198" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="6812" width="200" height="200">
                            <path d="M635.635 1022.928c-39.368 0-72.301-23.406-90.471-64.289-8.202-18.422-17.35-24.29-23.533-27.066-10.852-4.984-18.864-3.596-29.274 4.353-8.391 6.372-14.006 13.438-17.097 21.577-18.612 47.949-67.885 72.932-118.925 63.216-48.706-9.148-87.506-26.182-118.673-51.986-22.46-18.675-35.33-39.873-39.368-64.92-3.47-21.64 1.956-39.936 7.129-53.437 4.227-11.167 7.445-20.378 7.066-28.895-0.442-8.328-6.688-15.709-14.321-16.719-14.7-1.956-29.968 1.451-45.046 4.921-42.333 9.653-79.935-4.227-105.55-38.422C20.507 735.237 5.176 694.481 2.084 650.129c-3.47-48.643 17.791-85.361 59.873-103.215 15.015-6.372 25.299-15.583 31.356-28.075 5.363-11.041 2.208-16.277-1.199-20.252-11.861-14.258-17.602-17.728-20-18.612C12.179 458.839-7.127 396.38 4.671 345.719c7.382-31.924 18.675-68.831 45.993-100.376 27.192-31.293 60.63-42.649 96.97-32.239l6.814 1.956c11.23 3.281 20.883 6.057 29.463 6.057 29.968-1.893 31.103-18.548 31.608-25.678l0.757-12.113c0.315-2.587-0.442-21.514-2.713-30.599-9.779-38.8 3.028-75.077 36.151-102.017 32.807-26.75 72.743-42.144 125.739-48.453 43.532-5.236 77.159 15.142 95.96 55.267 6.183 12.997 11.104 20.694 17.034 26.435 14.826 14.321 44.605 5.93 53.816-13.186 5.552-11.482 12.744-22.965 21.324-34.195 20.567-26.687 51.166-39.053 85.74-34.069 32.176 4.795 73.879 14.132 109.84 44.037 20.504 17.034 40.441 37.286 46.939 69.336 4.669 23.028-2.082 42.333-7.066 56.403-3.218 9.274-4.416 17.35-3.659 25.425 1.199 13.249 14.069 25.804 27.003 26.245 11.482-0.946 22.712-1.956 32.807-6.183 13.88-5.741 27.76-8.643 41.198-8.643 21.955 0 53.564 7.634 79.746 44.1 24.479 34.132 38.737 74.573 43.721 123.594 4.353 42.649-17.665 78.106-60.314 97.159-9.148 4.101-16.277 9.085-22.145 15.457-7.571 8.076-10.599 18.675-8.58 29.274 1.956 10.41 8.643 18.99 18.233 23.596 17.35 8.139 37.034 19.306 51.923 39.747 17.539 23.848 23.596 52.239 17.981 84.225-4.921 28.643-15.079 70.85-46.056 106.244-29.274 33.438-61.134 40.504-82.711 40.504-9.148 0-18.612-1.262-28.012-3.659-15.773-4.101-31.987-8.012-48.264-4.858-6.877 1.262-15.646 11.167-16.088 18.296-0.82 11.924 0.252 20.504 3.407 27.633 20.504 46.245 4.795 99.178-38.169 128.704-33.501 22.965-71.166 37.412-112.048 42.901C644.468 1022.676 639.989 1022.928 635.635 1022.928zM510.086 855.802c13.943 0 27.949 3.091 41.639 9.274 26.372 11.987 46.561 33.501 60.062 63.973 9.337 20.946 20.252 20.946 23.848 20.946l3.659-0.252c29.842-3.975 56.15-14.069 80.503-30.788 10.599-7.255 20.315-21.892 12.744-39.053-10.599-23.974-10.536-46.876-9.527-62.018 2.776-40.63 36.151-77.979 75.897-85.172 28.958-5.237 57.349 0.315 79.43 5.994 10.347 2.587 19.242 6.751 37.665-14.258 14.574-16.593 23.533-38.422 29.085-70.661 2.713-15.52-1.009-23.217-4.984-28.643-5.047-6.94-13.375-11.798-24.29-16.971-30.851-14.574-52.239-42.207-58.674-75.771-6.435-33.69 3.344-67.443 26.75-92.553 12.492-13.501 27.444-24.164 45.74-32.428 19.179-8.517 18.233-17.413 17.665-23.28-3.659-36.024-13.628-64.92-30.473-88.389-9.842-13.691-17.539-13.691-20.441-13.691-3.785 0-8.265 1.009-13.186 3.091-18.801 7.823-38.359 11.798-57.917 11.798-55.519-2.019-98.042-42.712-102.585-92.742-1.64-18.548 0.82-36.908 7.571-56.024 2.461-7.129 5.047-14.448 4.353-17.791-1.956-9.527-9.274-17.097-22.082-27.76-17.476-14.511-39.558-22.839-74.005-27.949-8.643-0.505-12.744 0.757-17.034 6.309-5.615 7.318-10.158 14.511-13.564 21.514-18.17 37.728-57.349 62.144-99.745 62.144-26.624 0-51.671-10.031-70.535-28.264-15.773-15.331-25.11-32.744-32.239-47.759-6.624-14.195-13.186-14.195-17.476-14.195-42.523 4.858-70.535 15.205-92.175 32.807-14.132 11.545-13.564 19.432-11.419 27.823 3.407 13.754 5.11 42.333 5.11 42.333l0.126 2.145-1.262 21.009c-3.722 52.996-41.892 89.651-97.348 93.31l-7.066 0.189c-18.927 0-35.33-4.732-49.778-8.959l-6.372-1.83c-7.255-0.82-12.555-0.946-21.955 9.842-16.845 19.432-24.416 44.731-30.094 69.147-3.596 15.457-1.073 41.261 20.694 48.958 22.334 7.886 39.368 25.804 51.734 40.567 23.596 28.264 27.507 64.352 10.788 98.925-13.943 28.706-36.971 49.967-68.453 63.342-9.464 4.038-17.161 9.148-15.583 30.977 2.082 30.157 12.492 57.854 30.977 82.459 11.987 15.962 20.252 13.628 30.914 11.167 21.324-4.921 45.551-9.59 71.039-6.183 42.712 5.615 75.33 41.64 77.475 85.613 1.009 22.523-5.236 41.072-11.735 58.169-2.902 7.697-3.848 12.303-3.218 15.962 0.82 5.3 3.091 11.419 13.943 20.441 21.577 17.918 48.832 29.463 85.613 36.403 2.965 0.568 5.93 0.82 8.896 0.82 21.135 0 26.624-14.006 28.391-18.612 7.949-20.757 21.829-38.8 41.072-53.437C467.563 863.184 488.32 855.802 510.086 855.802z"
                                  p-id="6813"></path>
                            <path d="M508.193 756.499c-133.373 0-242.266-110.092-242.708-245.358-0.442-135.833 106.244-243.528 242.96-245.231l0 0c136.212 0 245.421 109.524 246.493 244.159 1.136 134.571-108.452 245.105-244.222 246.43L508.193 756.499zM511.537 338.842c-98.358 1.199-173.435 76.781-173.119 172.047 0.315 95.203 76.465 172.678 169.776 172.678l1.767 0c95.645-0.946 172.804-78.484 172.047-172.867C681.25 415.938 604.784 338.842 511.537 338.842z"
                                  p-id="6814"></path>
                        </svg>
                        <span slot="title">设置</span>
                    </template>
                    <el-menu-item index="3-1" @click="showTeacherPassword">
                        <svg t="1654521792324" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="2196" width="200" height="200">
                            <path d="M768 947.2H256a102.4 102.4 0 0 1-102.4-102.4v-358.4a102.4 102.4 0 0 1 102.4-102.4v-51.2a256 256 0 0 1 506.88-51.2h-106.496A153.6 153.6 0 0 0 358.4 332.8v51.2h409.6a102.4 102.4 0 0 1 102.4 102.4v358.4a102.4 102.4 0 0 1-102.4 102.4z m0-460.8H256v358.4h512z m-256 51.2a102.4 102.4 0 0 1 102.4 102.4 102.4 102.4 0 0 1-51.2 88.064v65.536H460.8v-65.536a102.4 102.4 0 0 1-51.2-88.064 102.4 102.4 0 0 1 102.4-102.4z"
                                  fill="" p-id="2197"></path>
                        </svg>
                        <span slot="title">修改密码</span>
                    </el-menu-item>
                </el-submenu>
                <el-menu-item index="4" @click="loginout">
                    <svg t="1654350081908" class="icon" viewBox="0 0 1042 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="7655" width="200" height="200">
                        <path d="M581.632 697.344l126.976 0 0 194.56q0 33.792-10.24 58.88t-27.136 40.96-39.424 23.552-48.128 7.68l-452.608 0q-24.576 0-48.128-9.728t-41.472-27.136-29.184-40.96-11.264-52.224l0-706.56q0-24.576 11.776-47.104t30.208-39.936 40.96-28.16 45.056-10.752l449.536 0q26.624 0 50.176 11.776t41.472 29.696 28.16 40.448 10.24 44.032l0 188.416-126.976 0 1.024-195.584-452.608 0-1.024 713.728 452.608 0 0-195.584zM1021.952 505.856q37.888 30.72 2.048 60.416-20.48 15.36-44.544 37.888t-50.176 46.592-51.712 47.616-47.104 40.96q-23.552 18.432-40.448 18.432t-16.896-24.576q2.048-14.336 0.512-35.84t-1.536-36.864q0-17.408-12.288-21.504t-29.696-4.096l-40.96 0-62.464 0q-34.816 0-73.216-0.512t-73.216-0.512l-62.464 0-41.984 0q-8.192 0-17.92-1.536t-17.408-6.656-12.288-14.336-4.608-23.552q0-19.456-0.512-46.08t0.512-47.104q0-27.648 13.312-37.888t43.008-9.216l33.792 0 59.392 0q32.768 0 70.144 0.512t71.168 0.512l61.44 0 38.912 0q25.6 1.024 43.52-4.096t17.92-22.528q0-14.336 1.024-32.256t1.024-32.256q0-23.552 12.8-29.696t32.256 9.216q19.456 16.384 45.568 38.4t52.736 45.056 52.736 45.568 47.616 39.936z"
                              p-id="7656"></path>
                    </svg>
                    <span slot="title">退出登录</span>
                </el-menu-item>
            </el-menu>
        </el-aside>


        <el-container>
            <!--                        <el-header>-->
            <!--                            &lt;!&ndash;         tab标签页区域 - 用于标签页切换 &ndash;&gt;-->
            <!--                            <div class="tabs-switch-page">-->
            <!--                                <el-tag-->
            <!--                                        size="medium"-->
            <!--                                        v-for="(tab, index) in tabList"-->
            <!--                                        :key="tab.name"-->
            <!--                                        @close="handleClose(tab, index)"-->
            <!--                                        @click="changeMenu(tab)"-->
            <!--                                        :closable="tab.name !== 'home'"-->
            <!--                                        :effect="activePath === tab.name ? 'dark' : 'plain'">-->
            <!--                                    {{tab.label}}-->
            <!--                                </el-tag>-->
            <!--                            </div>-->
            <!--                        </el-header>-->
            <el-main v-if="TeacherCourseShow">
                <!--搜索表单-->
                <el-form :inline="true" :model="course" class="demo-form-inline">

                    <el-form-item label="课程名称">
                        <el-input v-model="course.name" placeholder="课程名称"></el-input>
                    </el-form-item>

                    <el-form-item label="上课时间">
                        <el-input v-model="course.courseTime" placeholder="上课时间"></el-input>
                    </el-form-item>

                    <el-form-item label="类型">
                        <el-select v-model="course.type" placeholder="类型">
                            <el-option label="必修课" value="必修课"></el-option>
                            <el-option label="选修课" value="选修课"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="queryCourse">查询</el-button>
                    </el-form-item>
                </el-form>
                <!--按钮-->
                <el-row>
                    <el-button type="danger" plain @click="deleteByIds">批量删除</el-button>
                    <el-button type="primary" plain @click="AddDialogVisible = true">新增</el-button>
                </el-row>
                <template>
                    <el-table
                            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                            style="width: 100%"
                            :row-key="getRowKeys"
                            ref="tableData"
                            @selection-change="handleSelectionChange"
                    >
                        <el-table-column
                                type="selection"
                                :reserve-selection="true"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                type="index"
                                width="50">
                        </el-table-column>
                        <el-table-column
                                prop="id"
                                width="50"
                                v-if="false"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="课程名称"
                                align="center"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="credit"
                                label="学分"
                                align="center"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="courseTime"
                                align="center"
                                label="上课时间">
                        </el-table-column>
                        <el-table-column
                                prop="departmentName"
                                align="center"
                                label="学院"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="type"
                                align="center"
                                label="类型">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="操作">
                            <!-- scope.$index 获取表格index -->
                            <template slot-scope="scope">
                                <el-button type="primary" @click="showUpdateTableData(scope.$index)">修改</el-button>
                                <el-button @click="deleteCourseSingle(scope.$index)" type="danger">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
                <!--    :current-page的值表示当前是第几页；-->
                <!--    :page-sizes的值表示可以选择一页多少条；-->
                <!--    :page-size的值表示当前一页显示几条；-->
                <!--    layout的值表示分页需要显示的内容，例如“total” 表示总数、“next” 表示下一页等；-->
                <!--    :total的值表示共几页；-->
                <!--    分页工具条-->
                <el-pagination align='left'
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="currentPage"
                               :page-sizes="[5,10,15,20]"
                               :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="tableData.length">
                </el-pagination>
            </el-main>
            <el-main v-if="TeacherInfoShow">
                <el-descriptions class="margin-top" title="教师信息" :column="2" :size="size" border>
                    <el-descriptions-item>
                        <template slot="label">
                            <svg t="1654412093602" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="3609" width="200" height="200">
                                <path d="M421.738667 348.032l-234.666667-0.021333a21.333333 21.333333 0 0 1 0-42.666667l234.666667 0.021333a21.333333 21.333333 0 0 1 0 42.666667zM485.738667 433.365333h-298.666667a21.333333 21.333333 0 0 1 0-42.666666h298.666667a21.333333 21.333333 0 0 1 0 42.666666zM357.738667 517.397333h-170.666667a21.333333 21.333333 0 0 1 0-42.666666h170.666667a21.333333 21.333333 0 0 1 0 42.666666zM710.72 687.744c-70.592 0-128-57.408-128-128s57.408-128 128-128 128 57.408 128 128-57.408 128-128 128z m0-213.333333c-47.061333 0-85.333333 38.272-85.333333 85.333333s38.272 85.333333 85.333333 85.333333 85.333333-38.272 85.333333-85.333333c0-47.04-38.272-85.333333-85.333333-85.333333z"
                                      fill="#666666" p-id="3610"></path>
                                <path d="M892.053333 856.96h-42.666666c0-82.325333-62.208-149.333333-138.666667-149.333333s-138.666667 67.008-138.666667 149.333333h-42.666666c0-105.877333 81.344-192 181.333333-192s181.333333 86.122667 181.333333 192z"
                                      fill="#666666" p-id="3611"></path>
                                <path d="M891.221333 860.928h-725.333333c-47.061333 0-85.333333-38.272-85.333333-85.333333v-116.906667a21.333333 21.333333 0 1 1 42.666666 0v116.906667c0 23.530667 19.136 42.666667 42.666667 42.666666h725.333333c23.530667 0 42.666667-19.136 42.666667-42.666666v-554.666667c0-23.530667-19.136-42.666667-42.666667-42.666667h-725.333333c-23.530667 0-42.666667 19.136-42.666667 42.666667v245.781333a21.333333 21.333333 0 0 1-42.666666 0V220.928c0-47.061333 38.272-85.333333 85.333333-85.333333h725.333333c47.061333 0 85.333333 38.272 85.333334 85.333333v554.666667c0 47.061333-38.272 85.333333-85.333334 85.333333z"
                                      fill="#666666" p-id="3612"></path>
                                <path d="M100.778667 562.709333m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#666666"
                                      p-id="3613"></path>
                            </svg>
                            教职工号
                        </template>
                        {{teacherInfo.id}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            姓名
                        </template>
                        {{teacherInfo.name}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <svg t="1654523115135" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="2510" width="200" height="200">
                                <path d="M809.571303 435.421904c-24.020066-86.194104-72.073502-134.48904-135.600351-136.855948l0-70.705342c0-17.253966-13.979386-31.233352-31.233352-31.233352-17.253966 0-31.233352 13.979386-31.233352 31.233352l0 70.478168L413.694043 298.338782l0-70.478168c0-17.253966-13.979386-31.233352-31.233352-31.233352s-31.233352 13.979386-31.233352 31.233352l0 70.681806c-64.260559 2.124384-110.00337 48.131207-135.636167 136.248104L102.269221 784.325315c-1.006933 3.110851-1.524726 6.354731-1.524726 9.628288 0 80.553641 63.605643 146.08003 141.79033 146.08003l539.891234 0c78.184687 0 141.79033-65.526389 141.79033-146.08003 0-3.273557-0.518816-6.517437-1.524726-9.628288L809.571303 435.421904zM782.425036 877.56693 242.533802 877.56693c-42.285059 0-76.94444-35.056424-79.201853-79.039147l111.959931-345.375052c24.095791-82.770122 57.514925-92.347245 80.563874-92.347245L669.103084 360.805486c25.102724 0 59.436694 15.95232 80.452333 91.940992 0.121773 0.436952 0.25378 0.873903 0.397043 1.301645l111.675452 344.480682C859.369475 842.511529 824.710095 877.56693 782.425036 877.56693z"
                                      p-id="2511"></path>
                                <path d="M390.596999 453.519074c-17.253966 0-31.233352 13.979386-31.233352 31.233352l0 30.470989c0 17.253966 13.979386 31.233352 31.233352 31.233352 17.253966 0 31.233352-13.979386 31.233352-31.233352l0-30.470989C421.829328 467.49846 407.849942 453.519074 390.596999 453.519074z"
                                      p-id="2512"></path>
                                <path d="M634.361839 453.519074c-17.253966 0-31.233352 13.979386-31.233352 31.233352l0 30.470989c0 17.253966 13.979386 31.233352 31.233352 31.233352 17.253966 0 31.233352-13.979386 31.233352-31.233352l0-30.470989C665.59519 467.49846 651.615804 453.519074 634.361839 453.519074z"
                                      p-id="2513"></path>
                                <path d="M589.274968 594.576717c-14.528901-9.302877-33.845853-5.083785-43.148729 9.455349-0.121773 0.193405-13.379729 19.449981-33.968649 19.449981-20.008706 0-32.453133-18.127869-33.287127-19.378349-9.17087-14.407128-28.274974-18.809391-42.823318-9.750061-14.650675 9.099239-19.155269 28.355815-10.044774 43.00649 11.214413 18.047028 41.980113 48.588625 86.155219 48.588625 43.952025 0 75.094302-30.308283 86.572728-48.222281C608.033193 623.207801 603.803869 603.879594 589.274968 594.576717z"
                                      p-id="2514"></path>
                                <path d="M957.156616 268.77342c-2.023076-4.28049-50.500161-105.401562-126.417201-147.443074C780.768303 93.64582 602.559529 86.325088 515.315512 86.325088c-103.673198 0-274.744411 9.323343-321.085856 35.005258C118.302383 163.371858 69.825298 264.49293 67.802222 268.77342c-7.370875 15.59621-0.711198 34.222429 14.874779 41.593304 15.626909 7.401574 34.222429 0.711198 41.593304-14.874779 11.407817-24.12649 51.658544-92.621491 100.226702-119.524211 23.150256-12.831236 152.444994-27.176966 290.818505-27.176966 139.135874 0 261.943874 14.325263 285.155529 27.176966 58.186214 32.230052 99.82045 118.679983 100.226702 119.55491 5.347798 11.255345 16.551978 17.853623 28.244274 17.853623 4.473895 0 9.018398-0.966001 13.338796-3.009544C957.867814 302.995849 964.52749 284.369629 957.156616 268.77342z"
                                      p-id="2515"></path>
                            </svg>
                            电话
                        </template>
                        {{teacherInfo.phone}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <svg t="1654414436950" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="7560" width="200" height="200">
                                <path d="M838.954667 234.666667H170.666667c-3.626667 0-7.168 0.448-10.56 1.322666l323.690666 323.669334a21.333333 21.333333 0 0 0 30.165334 0L838.954667 234.666667z m46.144 14.186666l-260.693334 260.693334 262.933334 262.912c5.44-7.168 8.661333-16.106667 8.661333-25.792V277.333333c0-10.944-4.117333-20.906667-10.88-28.48zM843.861333 789.333333l-249.6-249.621333-50.133333 50.133333a64 64 0 0 1-90.517333 0l-50.112-50.133333L156.373333 786.88c4.48 1.578667 9.28 2.453333 14.314667 2.453333h673.194667zM128.661333 754.218667L373.333333 509.525333 129.578667 265.813333A42.709333 42.709333 0 0 0 128 277.333333v469.333334c0 2.56 0.213333 5.098667 0.661333 7.552zM170.666667 192h682.666666a85.333333 85.333333 0 0 1 85.333334 85.333333v469.333334a85.333333 85.333333 0 0 1-85.333334 85.333333H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333333V277.333333a85.333333 85.333333 0 0 1 85.333334-85.333333z"
                                      fill="#333333" p-id="7561"></path>
                            </svg>
                            邮箱
                        </template>
                        {{teacherInfo.email}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-tickets"></i>
                            身份
                        </template>
                        <el-tag size="small">教师</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <svg t="1654412675224" class="icon" viewBox="0 0 1028 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="6701" width="200" height="200">
                                <path d="M32.57709 364.8c6.4 0 12.8 0 19.2-6.4l70.4-44.8c0 6.4 6.4 6.4 12.8 6.4h755.2c6.4 0 12.8 0 19.2-6.4l70.4 44.8c6.4 6.4 12.8 6.4 19.2 6.4 12.8 0 19.2-6.4 25.6-12.8 6.4-12.8 6.4-32-12.8-44.8l-480-300.8c-12.8-6.4-25.6-6.4-32 0l-486.4 294.4c-12.8 12.8-19.2 32-6.4 44.8 6.4 12.8 12.8 19.2 25.6 19.2z m179.2-108.8l300.8-185.6 300.8 185.6h-601.6z m-83.2 576h192V384h-192v448z m64-390.4h64v339.2h-64V441.6z m448 390.4V384h-256v448h256z m-192-390.4h128v339.2h-128V441.6z m256 390.4h192V384h-192v448z m64-390.4h64v339.2h-64V441.6zM0.57709 896h1024v128H0.57709z"
                                      p-id="6702"></path>
                                <path d="M512.57709 64l-320 192 640 64V192z" p-id="6703"></path>
                            </svg>
                            院系
                        </template>
                        {{teacherInfo.departmentName}}
                    </el-descriptions-item>
                </el-descriptions>
                <br>
                <el-button type="primary" round @click="showUpdateTeacherInfo">修改信息</el-button>
            </el-main>
            <el-main v-if="updateTeacherPasswordVisible">
                <el-form :model="updatedTeacherPassword" status-icon :rules="rules" ref="updatedTeacherPassword"
                         label-width="100px" class="demo-ruleForm">
                    <el-form-item label="旧密码" prop="oldPassword">
                        <el-input type="password" v-model="updatedTeacherPassword.oldPassword"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="updatedTeacherPassword.password"
                                  autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPassword">
                        <el-input type="password" v-model="updatedTeacherPassword.checkPassword"
                                  autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitTeacherPassword" :disabled="sumbitPasswordShow">提交</el-button>
                        <el-button @click="resetUpdatedTeacherPassword('updatedTeacherPassword')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-main>
        </el-container>
    </el-container>

    <!--    修改教师信息-->
    <el-dialog
            title="修改教师信息"
            :visible.sync="updateTeacherInfoVisible"
            width="30%"
    >

        <el-form ref="updateTeacherInfo" :model="updatedTeacherInfo" :rules="rules" label-width="80px">
            <el-form-item label="教职工号" required="true">
                <el-input v-model="updatedTeacherInfo.id" disabled></el-input>
            </el-form-item>

            <el-form-item label="姓名" required="true">
                <el-input v-model="updatedTeacherInfo.name" disabled></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
                <el-input v-model="updatedTeacherInfo.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="updatedTeacherInfo.email"></el-input>
            </el-form-item>
            <el-form-item label="院系" required="true">
                <el-input v-model="updatedTeacherInfo.departmentName"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="updateTeacherInfo">提交</el-button>
                <el-button @click="updateTeacherInfoVisible=false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>

    <!--    添加数据对话框表单-->
    <el-dialog
            title="添加课程"
            :visible.sync="AddDialogVisible"
            width="30%"
    >

        <el-form ref="addCourseData" :model="addcourse" label-width="80px">
            <el-form-item label="课程名称" required="true">
                <el-input v-model="addcourse.name"></el-input>
            </el-form-item>

            <el-form-item label="学分" required="true">
                <el-input-number v-model="addcourse.credit" :min="1" :max="5"></el-input-number>
            </el-form-item>
            <el-form-item label="上课时间" required="true">
                <el-select v-model="addcourse.timeWeek">
                    <el-option label="周一" value="周一"></el-option>
                    <el-option label="周二" value="周二"></el-option>
                    <el-option label="周三" value="周三"></el-option>
                    <el-option label="周四" value="周四"></el-option>
                    <el-option label="周五" value="周五"></el-option>
                    <el-option label="周六" value="周六"></el-option>
                    <el-option label="周日" value="周日"></el-option>
                </el-select>

                <el-select v-model="addcourse.timePriod" @change="getCourseTime">
                    <el-option label="8:30-10:05" value="8:30-10:05"></el-option>
                    <el-option label="10:20-12:00" value="10:20-12:00"></el-option>
                    <el-option label="13:30-15:05" value="13:30-15:05"></el-option>
                    <el-option label="15:20-16:50" value="15:20-16:50"></el-option>
                    <el-option label="17:50-19:25" value="17:50-19:25"></el-option>
                    <el-option label="19:40-21:10" value="19:40-21:10"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="类型" required="true">
                <el-select v-model="addcourse.type">
                    <el-option label="必修课" value="必修课"></el-option>
                    <el-option label="选修课" value="选修课"></el-option>
                </el-select>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="addCourse">提交</el-button>
                <el-button @click="AddDialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
    <!--    修改数据对话框表单-->
    <el-dialog
            title="修改课程"
            :visible.sync="updateTableDataVisible"
            width="30%"
    >

        <el-form ref="updateCourseData" :model="updateCourse" label-width="80px">
            <el-form-item label="课程名称" required="true">
                <el-input v-model="updateCourse.name"></el-input>
            </el-form-item>

            <el-form-item label="学分" required="true">
                <el-input-number v-model="updateCourse.credit" :min="1" :max="5"></el-input-number>
            </el-form-item>

            <el-form-item label="上课时间" required="true">
                <el-input v-model="updateCourse.courseTime"></el-input>
                <!--                <el-select v-model="updateCourse.timeWeek">-->
                <!--                    <el-option label="周一" value="周一"></el-option>-->
                <!--                    <el-option label="周二" value="周二"></el-option>-->
                <!--                    <el-option label="周三" value="周三"></el-option>-->
                <!--                    <el-option label="周四" value="周四"></el-option>-->
                <!--                    <el-option label="周五" value="周五"></el-option>-->
                <!--                    <el-option label="周六" value="周六"></el-option>-->
                <!--                    <el-option label="周日" value="周日"></el-option>-->
                <!--                </el-select>-->

                <!--                <el-select v-model="updateCourse.timePriod" @change="getCourseTime">-->
                <!--                    <el-option label="8:30-10:05" value="8:30-10:05"></el-option>-->
                <!--                    <el-option label="10:20-12:00" value="10:20-12:00"></el-option>-->
                <!--                    <el-option label="13:30-15:05" value="13:30-15:05"></el-option>-->
                <!--                    <el-option label="15:20-16:50" value="15:20-16:50"></el-option>-->
                <!--                </el-select>-->
            </el-form-item>
            <el-form-item label="类型" required="true">
                <el-select v-model="updateCourse.type">
                    <el-option label="必修课" value="必修课"></el-option>
                    <el-option label="选修课" value="选修课"></el-option>
                </el-select>
            </el-form-item>


            <el-form-item>
                <template slot-scope="scope">
                    <el-button type="primary" @click="updateCourseById">修改</el-button>
                    <el-button @click="updateTableDataVisible = false">取消</el-button>
                </template>
            </el-form-item>
        </el-form>

    </el-dialog>

</div>


<script src="js/vue.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="element-ui/lib/index.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="js/iconfont.js"></script>

<script>
    var url = location.href;
    var strings = url.split("?");
    var teacherId = strings[1];
    new Vue({
        el: "#TeacherCourse",
        mounted() {
            //当页面加载完成后，发送异步请求，获取数据
            this.selectAll();
            this.getTeacherInfo();
        },
        data() {
            var validateOldPass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入旧密码'));
                    this.sumbitPasswordShow = true;
                } else if (value !== this.teacherInfo.password) {
                    callback(new Error('旧密码错误!'));
                    this.sumbitPasswordShow = true;
                } else {
                    callback();
                    this.sumbitPasswordShow = false;
                }
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else if (!value.match(/^[a-zA-Z0-9]{5,17}$/)) {
                    callback(new Error('密码5-17位,由字母，数字组成！'));
                } else {
                    if (this.updatedTeacherPassword.checkPassword !== '') {
                        this.$refs.updatedTeacherPassword.validateField('checkPassword');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.updatedTeacherPassword.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                // 每页显示的条数
                currentPage: 1,
                pageSize: 5,
                //复选框选项数据集合
                multipleSelection: [],
                //周
                timeWeek: "",
                //教师信息
                teacherInfo: {},
                //时间段
                timePriod: "",
                //是否显示
                AddDialogVisible: false,
                //表格数据
                tableData: [],
                //教师课程信息
                TeacherCourseShow: false,
                //教师信息
                TeacherInfoShow: true,
                //查询课程数据
                course: {},
                //添加课程数据
                addcourse: {},
                //删除课程对象
                deleteCourse: {},
                //修改数据表单显示
                updateTableDataVisible: false,
                //修改老师表单显示
                updateTeacherInfoVisible: false,
                //提交按钮显示
                sumbitPasswordShow: true,
                //修改课程
                updateCourse: {},
                //被选中的id数组
                selectedIds: [],
                size: 'large',
                //修改之后的老师信息
                updatedTeacherInfo: {},
                //修改密码显示
                updateTeacherPasswordVisible: false,
                //修改密码后的对象
                updatedTeacherPassword: {
                    oldPassword: '',
                    password: '',
                    checkPassword: '',
                },
                rules: {
                    oldPassword: [
                        {required: true, validator: validateOldPass, trigger: 'blur'}
                    ],
                    password: [
                        {required: true, validator: validatePass, trigger: 'blur'}
                    ],
                    checkPassword: [
                        {required: true, validator: validatePass2, trigger: 'blur'}
                    ],
                    email: [
                        {pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: '电话格式不正确！', trigger: 'blur'}
                    ],
                    phone: [
                        {
                            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                            message: '邮箱格式不正确！',
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        methods: {
            getRowKeys(row) {
                return row.id;
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            //每页条数改变时触发 选择一页显示多少行
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
            },
            //拼接星期和时间段
            getCourseTime() {
                this.addcourse.courseTime = this.addcourse.timeWeek + this.addcourse.timePriod;
                // alert(this.addcourse.courseTime);
            },
            // 查询老师全部课程
            selectAll() {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/coursesystem/teacherServlet?teacherId=" + teacherId
                }).then(function (resp) {
                    _this.tableData = resp.data;
                })

            },
            //获取老师信息
            getTeacherInfo() {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/coursesystem/teacherInfoServlet?teacherId=" + teacherId
                }).then(function (resp) {
                    _this.teacherInfo = resp.data;
                })
            },
            //展示老师课程信息
            showTeacherCourseinfo() {
                this.TeacherInfoShow = false;
                this.updateTeacherPasswordVisible = false;
                this.TeacherCourseShow = true;

            },
            //展示老师信息
            showTeacherInfo() {
                this.TeacherCourseShow = false;
                this.updateTeacherPasswordVisible = false;
                this.TeacherInfoShow = true;
            },
            //展示修改密码页面
            showTeacherPassword() {
                this.TeacherInfoShow = false;
                this.TeacherCourseShow = false;
                this.updateTeacherPasswordVisible = true;
            },
            //修改密码
            submitTeacherPassword() {
                this.$confirm('此操作修改密码, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var _this = this;
                    axios({
                        method: "get",
                        url: "http://localhost:8080/coursesystem/updateTeacherPasswordServlet?teacherId=" + teacherId + "&password=" + _this.updatedTeacherPassword.password,
                    }).then(function (resp) {
                        if (resp.data == "success") {
                            _this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                        }
                    })
                }).catch(() => {
                    //取消
                    this.$message({
                        type: 'info',
                        message: '已取消修改'
                    });
                });
            },
            //重置表单
            resetUpdatedTeacherPassword(formName) {
                this.$refs[formName].resetFields();
                this.sumbitPasswordShow = true;
            },
            //根据信息查询
            queryCourse() {
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/coursesystem/teacherQueryServlet?teacherId=" + teacherId,
                    data: _this.course
                }).then(function (resp) {
                    _this.tableData = resp.data;
                    _this.$message({
                        message: '恭喜你，查询成功',
                        type: 'success'
                    })
                })
            },
            //添加课程
            addCourse() {
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/coursesystem/addCourseServlet?teacherId=" + teacherId,
                    data: _this.addcourse
                }).then(function (resp) {
                    if (resp.data == "success") {
                        _this.AddDialogVisible = false;
                        _this.selectAll();
                        _this.addcourse = {};
                        _this.$message({
                            message: '恭喜你，添加成功',
                            type: 'success'
                        })
                    }
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //单个删除
            deleteCourseSingle(index) {

                this.$confirm('此操作将永久删除该课程, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 确定
                    var _this = this;
                    // 根据课程名字删除课程
                    axios({
                        method: "get",
                        url: "http://localhost:8080/coursesystem/deleteCourseSingleServlet?courseId=" + _this.tableData[index].id
                    }).then(function (resp) {
                        if (resp.data == "success") {
                            //删除下标为index的表格数据
                            _this.tableData.splice(index, 1);
                            _this.selectAll();
                            _this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    })
                }).catch(() => {
                    //取消
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //显示修改表单
            showUpdateTableData(index) {
                this.updateCourse = JSON.parse(JSON.stringify(this.tableData[index]));//赋值操作
                this.updateTableDataVisible = true;
            },
            //修改课程
            updateCourseById() {
                this.$confirm('此操作将永久修改该课程, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var _this = this;
                    // 根据课程id修改课程
                    axios({
                        method: "post",
                        url: "http://localhost:8080/coursesystem/updateCourseServlet",
                        data: _this.updateCourse
                    }).then(function (resp) {
                        if (resp.data == "success") {
                            _this.updateTableDataVisible = false;
                            _this.selectAll();
                            _this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                        }
                    })
                }).catch(() => {
                    //取消
                    this.$message({
                        type: 'info',
                        message: '已取消修改'
                    });
                });
            },
            //显示修改表单
            showUpdateTeacherInfo() {
                this.updatedTeacherInfo = JSON.parse(JSON.stringify(this.teacherInfo));//赋值操作
                this.updateTeacherInfoVisible = true;
            },
            //修改老师信息
            updateTeacherInfo() {
                this.$confirm('此操作将修改教师信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var _this = this;
                    // 根据课程id修改课程
                    axios({
                        method: "post",
                        url: "http://localhost:8080/coursesystem/updateTeacherInfoServlet",
                        data: _this.updatedTeacherInfo
                    }).then(function (resp) {
                        if (resp.data == "success") {
                            _this.updateTeacherInfoVisible = false;
                            _this.getTeacherInfo();
                            _this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                        }
                    })
                }).catch(() => {
                    //取消
                    this.$message({
                        type: 'info',
                        message: '已取消修改'
                    });
                });
            },
            deleteByIds() {
                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    //1. 创建id数组, 从 this.multipleSelection 获取即可
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        let selectionElement = this.multipleSelection[i];
                        this.selectedIds[i] = selectionElement.id;
                    }
                    var _this = this;

                    axios({
                        method: "post",
                        url: "http://localhost:8080/coursesystem/deleteCourseByIdsServlet",
                        data: _this.selectedIds
                    }).then(function (resp) {
                        if (resp.data == "success") {
                            _this.selectAll();
                            _this.$message({
                                message: '恭喜你，删除成功',
                                type: 'success'
                            });

                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            loginout() {
                this.$confirm('此操作将退出登录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '退出登录成功!'
                    });
                    location.href = "http://localhost:8080/coursesystem/login.html";
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消退出登录！'
                    });
                });

            }
        }
    })

</script>

</body>
</html>